<template>
    <div>
        <!-- ref -->
        <p>年龄：{{ age }}</p>
        <button @click="age += 1">增加年龄</button>
        <!-- reactive -->
        <p>姓名：{{ user.name }}</p>
        <input placeholder="请输入姓名" v-model="user.name" />
        <!-- toref -->
        <p>城市：{{ user.adress.city }}</p>
        <input placeholder="请输入城市" v-model="user.adress.city" />
        <!-- 邮箱 -->
        <p>邮箱：{{ user.email }}</p>
        <input placeholder="请输入邮箱" v-model="email" />
    </div>

</template>
<script setup>
import { reactive, ref, toRef, toRefs } from 'vue';
const age = ref(25);
const user = reactive({
    name: '张三',
    adress: {
        city: "北京",
        country: "中国"
    },
    email: "zhangsan@example.com"
})
const city = toRef(user.adress.city,"city")
let {name,email} = toRefs(user)
setTimeout(()=>{
    age.value++;
    name.value ='李四'
    city.value = '上海'
    email.value = 'lise@example.com'
    // user.name = '李四';
    // user.adress.city = '上海';
    // user.email = 'lise@example.com'
}, 5000)

</script>
<style scoped></style>